<script setup lang="ts">
import {InfoCircleOutlined} from "@ant-design/icons-vue";
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import {message} from "ant-design-vue";
import BatchKeywordPackage from "~/contentScripts/views/wxt/components/BatchKeywordPackage.vue";
import LineTextArea from "~/contentScripts/views/wxt/components/LineTextArea.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  value: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  products: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  plans: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});

const emit = defineEmits([
  "update:value",
]);
const data = reactive({
  switchValue: true,

});
const dataSource = ref<any[]>([]);
const columns = [
  {
    title: '商品标题',
    dataIndex: 'item.title',
    dataType: 'custom',
    slot: 'title',
  },
  {
    title: '计划名称',
    dataIndex: 'plan.campaignName',
    width: 160,
    // dataType: 'custom',
    // slot: 'planName',
  },
  {
    title: '词包名称',
    dataIndex: 'wordPackageName',
    width: 160,
    dataType: 'custom',
    slot: 'wordPackageName',
  },
  {
    title: '操作',
    width: 80,
    dataType: 'custom',
    slot: 'action',
  },
]
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
const add = (rows: any[]) => {
  // 1. 过滤已经添加的
  const filterData = rows.filter(item => {
    return !dataSource.value.some((row: any) => item.wordPackageId === row.wordPackageId && item.plan.campaignId === row.plan.campaignId && item.item.itemId === row.item.itemId);
  });
  console.log(filterData, rows);
  dataSource.value = dataSource.value.concat(filterData);
}
const remove = (row: any) => {
  dataSource.value = dataSource.value.filter((item: any) => item.itemId !== row.item.itemId);
}
const selectedRows = ref<any[]>([]);
const clear = () => {
  // 删除已经勾选的
  dataSource.value = dataSource.value.filter((item: any) => !selectedRows.value.some((row: any) => item.itemId === row.itemId));
}
watch(() => dataSource.value, () => {
  if (data.switchValue) {
    emit('update:value', dataSource.value);
  }else {
    emit('update:value', []);
  }
}, {
  deep: true,
});
watch(() => data.switchValue, (val) => {
  if (data.switchValue) {
    emit('update:value', dataSource.value);
  }else {
    emit('update:value', []);
  }
});
</script>

<template>
  <div class="box" style="overflow: hidden;">
    <div class="title">
      <a-row>
        <a-col flex="1">

          <span class="bold">手动添加词包</span>
          <!--          <a-tooltip title="批量添加自定义关键词，按设定条件分配到已选择的单元，未设置手动添加的商品会自动添加">-->
          <!--            <InfoCircleOutlined/>-->
          <!--          </a-tooltip>-->
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span class="gray">手动添加词包: </span>
          <a-switch v-model:checked="data.switchValue" size="small"/>
        </a-col>
        <a-col>
          <a-space>
            <a-button type="primary" size="small" danger @click="()=>clear()">批量删除</a-button>
            <BatchKeywordPackage :plans="plans" :rows="products" :biz-code="bizCode" @ok="(rows)=>add(rows)">
              <a-button type="primary" size="small">添加词包</a-button>
            </BatchKeywordPackage>
          </a-space>
        </a-col>
      </a-row>
    </div>
    <div class="content" style="height: 303px;">
      <div class="mask" v-if="!data.switchValue">
        <InfoCircleOutlined/>&nbsp;&nbsp;不需要手动添加关键词
      </div>
      <base-table :columns="columns" v-model:selected-rows="selectedRows" selection row-key="id" :data-source="dataSource"
                  table-name="词包列表"
                  :scroll="{
        y:223,
      }"
      >
        <template #title="row">
          <a-row type="flex" class="adgroupName" :gutter="5">
            <a-col>
              <a-popover placement="right">
                <template #content>
                  <img :src="row.item.imgUrl"
                       style="width: 200px;height: 200px;"
                  />
                </template>
                <img :src="row.item.imgUrl"
                     style="width: 60px;height: 60px;border-radius: 5px;"
                />
              </a-popover>
            </a-col>
            <a-col flex="1" class="title">
              <a-tooltip :title="row.item.title">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.item.title }}</span>
              </a-tooltip>
              <div>
                <a-space>
                  <span style="color: #666;">ID: {{ row.item.itemId }}</span>
                  <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.item.itemId)"/>
                </a-space>
              </div>
            </a-col>
          </a-row>
        </template>
        <template #wordPackageName="row">
          {{ row.wordPackageName }}
          <!--          <a-button type="link" danger size="small" @click="()=> clear(row)">清空</a-button>-->
        </template>
        <template #action="row">
          <a-button type="link" danger size="small" @click="()=>remove(row)">删除</a-button>
        </template>
      </base-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.box {
  border: #eee solid 1px;
  border-radius: 10px;
  overflow: hidden;

  > .title {
    background-color: #ebeef5;
    padding: 10px;
    line-height: 28px;

    .bold {
      font-weight: bold;
      color: #444;
    }

    .gray {
      color: #555;
    }
  }
}

//

.content {
  color: #222;
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .9);
    color: #ff4d4f;
    //opacity: 0.5;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  > div {
    padding: 10px;
    border-bottom: #eee solid 1px;

    &:last-child {
      border-bottom: none;
    }

    .ant-row {
      height: 30px;
      line-height: 30px;

      .ant-col {
        height: 30px;
        line-height: 30px;
        color: #444;
      }
    }
  }
}

.product {
  .title {
    // 一行超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hover-show {
    display: none;
  }

  &:hover {
    .hover-show {
      display: block;
    }
  }
}

.top {
  background: rgb(249, 249, 249);
  padding: 10px;
  border-radius: 7px;
  color: #444;
}

.two-line {
  // 文字超出两行省略号
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 42px;
}
</style>
